<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>人员信息</title>
    <!-- 核心 css -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <!-- jquery及bootstrapjs -->
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/editable/bootstrap-table-editable.js"></script>

</head>
<body>
    <div class="container">
        <!-- 查询表单 -->
        <div class="card" style="padding: 16px; margin: 0px">
            <b style="margin-bottom: 6px">查询内容:</b>
            <form class="form-inline" id="myFrom">
                <label for="name" class="mb-2 mr-sm-2">姓名:</label>
                <input type="text" class="form-control mb-2 mr-sm-2" id="name" name="name" th:value="${param.name}" placeholder="请输入姓名">
                <label for="depart" class="mb-2 mr-sm-2">部门:</label>
                <select class="selectpicker form-control mb-2 mr-sm-2" id="depart" name="depart">
                    <option value="1">计算机</option>
                    <option value="2">大数据</option>
                    <option value="3">电子信息</option>
                </select>
                <button class="btn btn-primary mb-2" style="margin-right: 10px" id="search_btn">查询</button>
            </form>
        </div>
        <div id="toolbar">
            <button id="remove" class="btn btn-danger">
                <i class="glyphicon glyphicon-remove"></i> 删除
            </button>
            <button id="add" class="btn btn-primary">
                <i class="glyphicon glyphicon-ok"></i> 添加
            </button>
        </div>
        <!-- 加载bootstraptable的表格，ID名称必须为bootstrap-table -->
        <table id="bootstrap-table">
            <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="id" data-sortable="true">id</th>
                <th data-field="xh" data-sortable="true">xh</th>
                <th data-field="name" data-sortable="true">姓名</th>
                <th data-field="pho">照片</th>
                <th data-field="age" data-sortable="true">年龄</th>
                <th data-field="password">密码</th>
                <th data-field="departmentId">部门</th>
                <th data-field="updatetime">更新时间</th>
            </tr>
            </thead>
        </table>
    </div>
    <script>
        // 查询按钮事件
        $('#search_btn').click(function() {
            $('#bootstrap-table').bootstrapTable('refresh');
        })
        //bootstrap-table初始化
        $("#bootstrap-table").bootstrapTable({
            url : "/user/getAllUserByMyBatis", //请求后台的URL（*）
            dataType:"json",
        // 此间是与client不一样的地方=======================开始
            contentType : "application/x-www-form-urlencoded",
            sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
            //修改请求参数，不设置则有默认值 ，返回值必须是一个对象
            method : 'GET', //请求方式（*）
            toolbar : '#toolbar', //工具按钮用哪个容器
            search : false, //是否显示表格搜索
            showFooter : false, //显示底部，默认不显示
            sortName : 'xh',
            sortOrder : "asc", //排序方式
            // 此间是与client不一样的地方=======================结束
            striped : true, //是否显示行间隔色
            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination : true, //是否显示分页（*）
            showPaginationSwitch : true, //显示切换分页
            showFullscreen : false, //显示全屏
            showHeader : true, //显示头部，默认显示
            showExport : true, //显示导出
            showColumns : true, //是否显示所有的列（选择显示的列）
            showRefresh : true, //是否显示刷新按钮
            sortable : true, //是否启用排序
            pageNumber : 1, //初始化加载第一页，默认第一页,并记录
            pageSize : 5, //每页的记录行数（*）
            pageList : [ 5, 10, 15 ], //可供选择的每页的行数（*）
            queryParams:queryParam,
            strictSearch : true,
            minimumCountColumns : 2, //最少允许的列数
            clickToSelect : true, //是否启用点击选中行
            uniqueId : "id", //每一行的唯一标识，一般为主键列
            showToggle : true, //是否显示详细视图和列表视图的切换按钮
            cardView : false, //是否显示详细视图
            detailView : false, //是否显示父子表
        });
        function queryParam(params){
            var param = {
                limit : this.limit, // 页面大小
                offset : this.offset, // 页码
                pageNumber : this.pageNumber,
                pageSize : this.pageSize,
                orderColumn: params.sort,        //排序列名
                sortOrder: params.order,    //排序命令（desc，asc）
                name : $("#name").val()
            };
            return param;
        }
    </script>
</body>
</html>
